<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <h3>水电费数据修改</h3>
    </div>
    <div class="text item">
      <h3>月水电数据</h3>
      <el-form v-show="!showPushMonthHydropower">
        <el-form-item v-for="(item, i) in billList.amountGroupByTypeMonth" :key="i">

          <el-row :gutter="20">

            <el-col :span="1">
              <el-button size="mini" type="danger" @click="billList.amountGroupByTypeMonth.splice(i,1)">-</el-button>
            </el-col>
            <el-col :span="3">
              <el-date-picker
                  v-model="item.month"
                  placeholder="选择月"
                  style="width: 100%"
                  type="month"
                  value-format="yyyy-MM">
              </el-date-picker>

            </el-col>
            <el-col :span="3">

              <el-select v-model="item.type">
                <el-option label="水费" value="水费"></el-option>
                <el-option label="电费" value="电费"></el-option>
              </el-select>
            </el-col>
            <el-col :span="17">
              <el-input v-model="item.amount"/>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>

      <el-form v-show="showPushMonthHydropower">
        <el-form-item v-for="(ranking, i) in monthHydropower" :key="i">

          <el-row :gutter="20">
            <el-col :span="3">
              <el-date-picker
                  v-model="ranking.month"
                  placeholder="选择月"
                  style="width: 100%"
                  type="month"
                  value-format="yyyy-MM">
              </el-date-picker>

            </el-col>
            <el-col :span="3">

              <el-select v-model="ranking.type">
                <el-option label="水费" value="水费"></el-option>
                <el-option label="电费" value="电费"></el-option>
              </el-select>
            </el-col>
            <el-col :span="18">

              <el-input v-model="ranking.amount"/>
            </el-col>
          </el-row>

        </el-form-item>
      </el-form>

      <el-form :inline="true">

        <el-form-item label="日期">
          <el-date-picker
              v-model="pushMonthHydropower.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="pushMonthHydropower.type">
            <el-option label="水费" value="水费"></el-option>
            <el-option label="电费" value="电费"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="用量">
          <el-input v-model="pushMonthHydropower.amount" type="number"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="pushMonthHydropowerButton">确定</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="cancelAllEdit">取消修改</el-button>
        </el-form-item>

      </el-form>


      <el-form v-for="(amountType, i) in billList.topMap" :key="i" label-width="130px">
        <h3>{{ i }}排行</h3>
        <el-form-item v-for="(item, j) in amountType" :key="j">
          <el-row :gutter="20">
            <el-col :span="1">
              {{ j + 1 }}
            </el-col>
            <el-col :span="1">
              <el-button size="mini" type="danger" @click="amountType.splice(j,1)">-</el-button>
            </el-col>
            <el-col :span="6">
              <el-input v-model="item.companyName"/>

            </el-col>

            <el-col :span="5">
              <el-date-picker
                  v-model="item.month"
                  placeholder="选择月"
                  style="width: 100%"
                  type="month"
                  value-format="yyyy-MM">
              </el-date-picker>
            </el-col>
            <el-col :span="11">

              <el-input v-model="item.amount"/>

            </el-col>
          </el-row>
        </el-form-item>
      </el-form>

      <el-form :inline="true" style="text-align: right">

        <el-form-item label="公司">
          <el-input v-model="TopMap.companyName"/>
        </el-form-item>
        <el-form-item label="日期">
          <el-date-picker
              v-model="TopMap.month"
              placeholder="选择月"
              style="width: 100%"
              type="month"
              value-format="yyyy-MM">
          </el-date-picker>

        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="TopMap.type">
            <el-option label="水费" value="水费"></el-option>
            <el-option label="电费" value="电费"></el-option>
          </el-select>

        </el-form-item>
        <el-form-item label="用量">
          <el-input v-model="TopMap.amount" type="number"/>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="pushTopMapButton">确定</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="text-align: right">
      <el-button type="danger" @click="OverWrite">恢复真实数据</el-button>
      <el-button type="danger" @click="SetJson">确定修改</el-button>
    </div>
  </el-card>
</template>

<script>
import {getJson, overWrite, setJson} from "../../network/versionApi";
import {copyObj} from "../../common/utils";

export default {
  name: "billVersion",
  data() {
    return {
      param: {
        type: "Bill",
        name: "statistics",
        // version: 0,
      },
      billList: {},
      pushMonthHydropower: {
        month: null,
        type: "",
        amount: null
      },
      monthHydropower: [],

      TopMap: {
        companyName: null,
        type: null,
        month: null,
        amount: null,
      },

      showPushMonthHydropower: false

    }
  },
  methods: {
    cancelAllEdit() {
      this.monthHydropower = []
      this.showPushMonthHydropower = false
    },
    //替换水电排行
    pushTopMapButton() {

      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.TopMap.type === "电费") {
          this.billList.topMap.电费.push(this.TopMap)
          this.TopMap = {}
        }
        if (this.TopMap.type === "水费") {
          this.billList.topMap.水费.push(this.TopMap)
          this.TopMap = {}
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    //替换月水电用量数据
    pushMonthHydropowerButton() {
      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showPushMonthHydropower = true
        this.monthHydropower.push(copyObj(this.pushMonthHydropower))
        this.pushMonthHydropower = {}
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },

    GetJson() {
      this.param.version = this.bill;
      getJson(this.param,).then(res => {
        this.billList = res.data;
      }).catch(() => {
        // this.GetJson()
      })
    },
    //修改数据
    SetJson() {

      this.$confirm('确定提交? 提交前请确认输入是否正确', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.monthHydropower.length >= 1) {
          this.billList.amountGroupByTypeMonth = this.monthHydropower
        }
        setJson(this.param, this.billList).then(() => {
          this.GetJson();
          this.showPushMonthHydropower = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })


    },
    OverWrite() {
      this.$confirm('确定恢复真实数据? ', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        overWrite(this.param).then(() => {
          this.GetJson();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })

    },

  },
  mounted() {
    if (!this.watch) {
      this.GetJson();
    }

  },
  watch: {
    "bill": {
      handler: function () {
        this.GetJson();
      }
    }
  },
  props: ["bill"],
}
</script>

<style scoped>

</style>